<template>
  <div class="collage-order">
    <div class="screen">
      <span class="tits">状态：</span>
      <el-select v-model="status">
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span class="tits">起止时间：</span>
      <el-date-picker
        v-model="time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="tablebox" ref="tablebox">
      <el-table
      :data="list"
      border
      :height="oHeight"
      style="width: 100%"
      row-key="levelid" 
      :tree-props="{ children: 'flashsale_goods', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="time"
        label="活动时间"
        width="400"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.time">{{ scope.row.time }}</span>
          <span v-else>{{ scope.row.flashsale_goodsname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column
        label="售价(元)"
      >
        <template v-if="!scope.row.time " slot-scope="scope">{{scope.row.hasChildrenlist &&  scope.row.level==2?'--':scope.row.pgoods_points / 100}}</template>
      </el-table-column>
      <el-table-column
        prop="flashsale_goodsprice"
        label="抢购价(元)"
      >
      <template v-if="!scope.row.time " slot-scope="scope">{{scope.row.hasChildrenlist &&  scope.row.level==2?'--':scope.row.flashsale_goodsprice}}</template>
    </el-table-column>
      <el-table-column prop="pgoods_storage" label="库存">
        <template v-if="!scope.row.time " slot-scope="scope">{{scope.row.hasChildrenlist &&  scope.row.level==2?'--':scope.row.pgoods_storage}}</template>
      </el-table-column>
      <el-table-column prop="sale_num" label="已抢购数量">
        <template v-if="!scope.row.time " slot-scope="scope">{{scope.row.hasChildrenlist &&  scope.row.level==2?'--':scope.row.sale_num}}</template>        
      </el-table-column>
      <el-table-column prop="name" label="是否显示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_show"
            active-value="1"
            inactive-value="0"
            @change="changeShow(scope)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作">
        <template slot-scope="scope">
          <span class="operation" @click="deleteItem(scope.row)" v-if="scope.row.level!=3">删除</span>
          <span v-if="scope.row.time" class="operation" @click="edit(scope.row)">编辑</span>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="bot">
      <div>
        <!-- <el-checkbox></el-checkbox>
        <span class="tit">全选</span>
        <el-button size="mini">删除</el-button> -->
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="eachNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusList: [
        { label: "未开始", value: "1" },
        { label: "进行中", value: "2" },
        { label: "已结束", value: "3" },
      ],
      status: "",
      time: [],
      list: [],
      page: 1,
      eachNum: 20,
      total: 0,
      currentPage: 0,
      oHeight:0,
      categorylist: [],
      categorylistTwo: [],
      categorylistThr: [],
      hasChildren: false,
    };
  },
  created() {
    this.getList();
  },
  mounted(){
    let h = this.$refs.tablebox.offsetHeight
    this.$nextTick(()=>{
      this.oHeight = h
    })
  },
  methods: {
    getList() {
      let data = {};
      data.status = this.status || "";
      data.flashsale_start = this.time[0] || "";
      data.flashsale_end = this.time[1] || "";
      data.page = this.page;
      data.eachNum = this.eachNum;
      this.$http
        .post(
          "/admin/pointprod/index.php?act=flashsale&op=flashsale_list",
          data
        )
        .then((res) => {
          if (res.code == 1) {
            // for(var item  of res.data.list){
            //   // if(item.flashsale_goods){
            //   //   item.hasChildren = true
            //   // }     
            //   // item.level = 1;       
            //  for(var k in item.flashsale_goods){
            //   // if(item.flashsale_goods[k].childs){
            //   //     item.flashsale_goods[k].hasChildren = true
            //   //   }else{
            //   //     item.flashsale_goods[k].hasChildren = false
            //   //   }
            //     item.flashsale_goods[k].flashsale_goods = item.flashsale_goods[k].childs;  
            //  }
               
            // }
            res.data.list.map(item=>{
              item.levelid = '1' + item.id;
              item.level = 1;
              for(var k in item.flashsale_goods){
              if(item.flashsale_goods[k].childs){
                  item.flashsale_goods[k].hasChildrenlist = true
                }else{
                  item.flashsale_goods[k].hasChildrenlist = false
                }
              item.flashsale_goods[k].levelid = '2'+item.flashsale_goods[k].id;
              item.flashsale_goods[k].level = 2;
                item.flashsale_goods[k].flashsale_goods = item.flashsale_goods[k].childs;  
                var data = item.flashsale_goods[k].flashsale_goods
                for(var j in data){
                  data[j].levelid = '3'+data[j].id;
                  data[j].level = 3;
                }
             }
            })
            this.list = res.data.list;
            console.log(this.list);
            this.total = Number(res.data.totalNum);
          } else {
            this.$message.warning(res.msg);
            this.list = [];
          }
        });
    },

    // load(tree, treeNode, resolve) {
    //   console.log(tree, 'tree')
    //   console.log(treeNode, 'treeNode')
    //   console.log(resolve, 'resolve')
    //   if (tree.level === 1) {
    //     this.getChildrenNode(tree, resolve)
    //   }
    //   if (tree.level === 2) {
    //     this.getChildren(tree, resolve)
    //   }
    // },
    // setCurrentRow(row) {
    //   if (row) {
    //     console.log(row, 'rowwwww')
    //     this.pidd = row.id
    //     this.parentid = row.parent_id
    //   }
    // },
    // // 二级节点
    // getChildrenNode(tree, resolve) {
    //   console.log(resolve, 'rrrrrrrresolve')
    //   var res = this.getCategoryNext(1,tree.id);
    //   console.log(res);
    //   this.categorylistTwo = res.flashsale_goods.map(v => {
    //     return { ...v, hasChildren: v.level <= 2 }
    //   })
    //   console.log(this.categorylistTwo);
    //   return(this.categorylistTwo)
      
    //   // this.getCategoryNext(1,tree.id).then(res => {
    //   //   if (res.status === 200) {

    //   //     resolve(this.categorylistTwo)
    //   //   } else {
    //   //     this.$message({
    //   //       message: res.message,
    //   //       type: 'warning'
    //   //     })
    //   //   }
    //   // })
    // },
    // // 三级节点
    // getChildren(tree, resolve) {
    //   var res = this.getCategoryNext(2,tree.id);
    //   this.categorylistThr = res.childs.map(v => {
    //         return { ...v, hasChildren: false }
    //   })     
    //   return(this.categorylistThr)
    //   // this.getCategoryNext(2,tree.id).then(res => {
    //   //   if (res.status === 200) {
    //   //     this.categorylistThr = res.map(v => {
    //   //       return { ...v, hasChildren: false }
    //   //     })
    //   //     resolve(this.categorylistThr)
    //   //   } else {
    //   //     this.$message({
    //   //       message: res.message,
    //   //       type: 'warning'
    //   //     })
    //   //   }
    //   // })
    // },
    // //获取子节点数据
    // getCategoryNext(type,id){
    //   if(type==1){
    //     for(var item  of this.list){
    //         if(item.id == id){
    //              return item
    //         }
    //     }
    //   }else{
    //     for(var item  of this.list){          
    //       for(var k in item.flashsale_goods){
    //         if(item.flashsale_goods[k].id == id){
    //           return item.flashsale_goods[k]
    //        }
    //       }
    //   }
    //   }

    // },
    reset() {
      this.status = "";
      this.time = [];
      this.page = 1;
      this.eachNum = 10;
      this.getList();
    },
    handleSizeChange(val) {
      this.eachNum = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    edit(row) {
      this.$emit("editItem", row);
    },
    deleteItem(row) {
      this.$confirm("确定删除该项吗?", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          let data = {id: row.id}
          if(!row.time){
            data.goodsid = row.flashsale_goodsid
          }
          this.$http
            .post("/admin/pointprod/index.php?act=flashsale&op=flashsale_del", data)
            .then((res) => {
              if (res.code == 1) {
                this.$message.success(res.msg);
                this.getList();
              } else {
                this.$message.warning(res.msg);
              }
            });
        })
        .catch((_) => {});
    },
    changeShow(scope) {
      let data = {
        id: scope.row.id,
        value: scope.row.is_show,
        column:scope.row.time ? "time" : "goods"
      }
      this.$http
        .post(
          "/admin/pointprod/index.php?act=flashsale&op=flashsale_update_show",
          data
        )
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
    changeExpand(row, open) {
      console.log(row,open);
    },
  },
};
</script>

<style scoped lang="scss">
.collage-order {
  display: flex;
  flex-direction: column;
  height: 94%;
}
.tablebox {
  flex: 1;
}
.screen {
  padding: 20px 10px;
}
.screen .el-button {
  margin: 0 0 0 20px;
}
.screen .el-select {
  margin: 0 20px 0 0;
}
.operation {
  color: #72b7ff;
  cursor: pointer;
  margin: 0 5px;
}
.bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  height: 40px;
}
.tit {
  font-size: 14px;
  margin-left: 15px;
}
.bot .el-button {
  margin: 0 15px;
}
.tits {
  font-size: 14px;
}
</style>
